import React, { useState, useEffect } from "react";
import { Drawer, Input, Switch, Select, Button } from "antd";

import { CategoryApi } from "@/api/categroy";
import { TagApi } from "@/api/tags";
import style from "./index.module.scss";
import TextArea from "antd/lib/input/TextArea";
import { FileDrawer } from "../FileDrawer";

interface IProps {
  visible: boolean;
  article?: IArticle;
  onClose?: (arg: any) => void;
  onChange?: (arg: any) => void;
}

const FormItem = ({ label, content }) => {
  return (
    <div className={style.formItem}>
      <span className={style.label}>{label}</span>
      <div className={style.content}>{content}</div>
    </div>
  );
};
export const ArticleSetting: React.FC<IProps> = ({
  visible = false,
  article = {},
  onChange,
  onClose
}) => {
  const [fileVisible, setFileVisible] = useState(false);
  // 摘要
  const [summary, setSummary] = useState(null);
  // 文章密码
  const [password, setPassword] = useState(null);
  // 是否可评论
  const [isCommentable, setIsCommentable] = useState<boolean>(true);
  // 所有分类
  const [categorys, setCategorys] = useState<Array<ICategory>>([]);
  // 所有标签
  const [tags, setTags] = useState<Array<ITag>>([]);
  // 已选分类
  const [selectedCatetory, setSelectedCatetory] = useState(null);
  // 已选标签
  const [selectedTags, setSelectedTags] = useState([]);
  // 封面图
  const [cover, setCover] = useState(null);
  // 初始化数据
  useEffect(() => {
    const { summary, password, isCommentable, category, tags, cover } = article;
    setSummary(summary);
    setPassword(password);
    setIsCommentable(isCommentable);
    setSelectedCatetory(category ? category.id : []);
    setSelectedTags(Array.isArray(tags) ? tags.map(t => t.id) : []);
    setCover(cover);
  }, [article]);
  // 获取所有标签和分类
  useEffect(() => {
    Promise.all([CategoryApi.getAll(), TagApi.getAll()]).then(res => {
      setCategorys(res[0]);
      setTags(res[1]);
    });
  }, []);
  const saveDraft = () => {
    onChange({
      summary,
      password,
      isCommentable,
      category: selectedCatetory,
      tags: selectedTags,
      cover,
      status: "draft"
    });
  };
  const publish = () => {
    onChange({
      summary,
      password,
      isCommentable,
      category: selectedCatetory,
      tags: selectedTags,
      cover,
      status: "publish"
    });
  };
  return (
    <Drawer
      width={480}
      placement="right"
      title={"文章设置"}
      closable={true}
      onClose={onClose}
      visible={visible}
    >
      <FormItem
        label="文章摘要"
        content={
          <TextArea
            autoSize={{ minRows: 6, maxRows: 8 }}
            value={summary}
            onChange={e => setSummary(e.target.value)}
          ></TextArea>
        }
      />
      <FormItem
        label="访问密码"
        content={
          <Input.Password
            value={password}
            onChange={e => setPassword(e.target.value)}
          />
        }
      />
      <FormItem
        label="开启评论"
        content={
          <Switch defaultChecked={isCommentable} onChange={setIsCommentable} />
        }
      />
      <FormItem
        label="选择分类"
        content={
          <Select
            style={{ width: "100%" }}
            value={selectedCatetory}
            onChange={setSelectedCatetory}
          >
            {categorys.map(c => (
              <Select.Option key={c.id} value={c.id}>
                {c.label}
              </Select.Option>
            ))}
          </Select>
        }
      />
      <FormItem
        label="选择标签"
        content={
          <Select
            mode="tags"
            placeholder="Please select"
            defaultValue={selectedTags}
            onChange={data => {
              setSelectedTags(data);
            }}
            style={{ width: "100%" }}
          >
            {tags.map(t => (
              <Select.Option key={t.id} value={t.id}>
                {t.label}
              </Select.Option>
            ))}
          </Select>
        }
      />
      <FormItem
        label="文章封面"
        content={
          <div className={style.preview}>
            <div className={style.cover} onClick={() => setFileVisible(true)}>
              <img src={cover} />
            </div>
            <Input
              style={{ marginTop: 15 }}
              value={cover}
              onChange={e => setCover(e.target.value)}
              allowClear
            />
            {/* <Button onClick={() => setCover(null)}>移除</Button> */}
          </div>
        }
      />
      <FileDrawer
        closeAfterClick={true}
        visible={fileVisible}
        onClose={() => setFileVisible(false)}
        onChange={url => setCover(url)}
      />
      <div style={{ borderTop: "solid 1px #aaa", padding: "15px" }}>
        <Button onClick={saveDraft}>保存草稿</Button>
        <Button onClick={publish} style={{ marginLeft: 15 }} type="primary">
          发布
        </Button>
      </div>
    </Drawer>
  );
};
